<template>
  <div class="card">
    <div class="pic">
      <img src="@/assets/tomatoes.png" alt="">
    </div>
    <div class="content">
      <h2>西红柿炒蛋</h2>
      <p>经典美味的意大利面，配以新鲜番茄酱</p>
    </div>
  </div>
</template>

<script setup>
</script>

<style lang="less" scoped>
.card {
  width: 4rem;
  background: #FFFFFF;
  padding-bottom: 16px;
  box-sizing: border-box;


  .pic {
    width: 100%;

    img {
      width: 100%;
      height: auto;
      border-radius: 12px;
    }
  }

  .content {
    h2 {
      font-size: 0.38rem;
      color: #000000;
      font-weight: 500;
      margin: 8px 0;
      display: flex;
      align-items: center;
    }
  }

  p {
    font-weight: 400;
    font-size: 12px;
    color: #6B7280;
  }
}
</style>